<template>
  <div>
    <div id="printMe">
      <p class="bianhao">编号: {{ obj.serialNumber }}</p>
      <h1 class="title">动火方案审批表</h1>
      <table cellspacing="0" style="width:900px;page-break-after: always;">
        <tr align="left">
          <td rowspan="6">一、施工组织</td>
        </tr>
        <tr align="center">
          <td>动火单位</td>
          <td colspan="3">{{ obj.hotApplyUnit }}</td>
        </tr>
        <tr align="center">

          <td>动火作业时间</td>
          <td colspan="3">{{ obj.hotWorkStartTime | dateFormat('YYYY-MM-DD hh:mm:ss') }} 至
            {{ obj.hotWorkEndTime |dateFormat('YYYY-MM-DD hh:mm:ss') }}</td>
        </tr>
        <tr align="center">

          <td style="min-width: 150px">基层站场（作业区）负责人</td>
          <td style="min-width: 150px">{{ obj.workAdminUserName }}</td>
          <td style="min-width: 150px">动火作业级别</td>
          <td style="min-width: 150px">{{ obj.hotLevel }}</td>
        </tr>
        <tr align="center">
          <td>动火作业地点</td>
          <td colspan="6">{{ obj.hotPlace }}</td>
        </tr>
        <tr align="center">
          <td>动火作业单位负责人</td>
          <td>{{ obj.hotWorkUnitAdmin }}</td>
          <td>动火作业单位监护人</td>
          <td>{{ obj.hotWorkUnitGuardian }}</td>
        </tr>
        <tr align="left">
          <td rowspan="2">二、动火作业内容及目的</td>
        </tr>
        <tr align="center">
          <td colspan="6">
            <span class="hh">
              {{ obj.hotContent }}
            </span>
          </td>
        </tr>
        <tr align="left">
          <td rowspan="1" colspan="6">
            <div>
              <p>三、动火作业部位与周围油气流程及置换隔断示意图（管线要注明介质、尺寸，控制流程中的阀门要编号，由动火申请单位绘制，生产部门审核）</p>
              <span v-for="(item,index) in imgArr" :key="index">
                <el-image style="width: 100px; height: 100px" :src="item | imgPath" />
              </span>
              <div class="three" style="margin-top: 0">
                <p class="right">
                  <span>
                    绘制：{{ obj.drawUser }}
                  </span>
                </p>
                <p class="right">
                  <span>
                    审核：{{ obj.processUser }}
                  </span>

                </p>
                <p class="left">（特级、一级由生产科工艺设备管理人员审核，二级由作业区工艺技术员审核）</p>
              </div>
            </div>
          </td>
        </tr>
        <tr align="left">
          <td rowspan="1" colspan="6">
            <div>
              <p>四、动火作业安全技术措施及现场施工组织（内容较多时可另加纸）（内容参见附录C.1）</p>
              <p>{{ obj.measure }}</p>
              <div class="three" />
            </div>
          </td>
        </tr>
        <tr align="left">
          <td rowspan="1" colspan="6">
            <div>
              <p>五、动火作业单位审查意见（负责人）</p>
              <div class="three">
                <p class="right">
                  <span>
                    签字:{{ obj.hotWorkUnitAdminUsername }}
                  </span>
                </p>
                <p v-if="obj.hotWorkUnitAdminApproval" class="right">
                  <span>时间:{{ obj.hotWorkUnitAdminApproval.approvalTime |dateFormat("YYYY 年 MM 月 DD 日 HH 时 mm 分") }}</span>
                </p>
              </div>
            </div>
          </td>
        </tr>
        <tr align="left">
          <td rowspan="1" colspan="6">
            <div>
              <p>六、作业区域所在基层单位审查意见：</p>
              <div class="three">
                <p class="right">
                  <span>签字:{{ obj.basicUnitAdminUsername }}</span>
                </p>
                <p v-if="obj.basicUnitAdminApproval" class="right">
                  <span>时间:{{ obj.basicUnitAdminApproval.approvalTime |dateFormat("YYYY 年 MM 月 DD 日 HH 时 mm 分") }}</span>
                </p>
              </div>
            </div>
          </td>
        </tr>

      </table>
      <table cellspacing="0" style="width:900px">
        <tr align="left">
          <td colspan="3">
            <p>七、二级单位业务主管部门审查意见</p>
          </td>
          <td>
            <p>生产调度运行部门:</p>
            <div class="four">
              <p> <span>签字:{{ obj.twoProductionAdminUsername }}</span></p>
              <p>
                <span
                  v-if="obj.twoProductionAdminApproval">时间:{{ obj.twoProductionAdminApproval.approvalTime |dateFormat("YYYY 年 MM 月 DD 日 HH 时 mm 分") }}</span>
              </p>
            </div>
          </td>
          <td>
            <p style="font-size:14px">资产设施管理部门（生产、管道或工程）:</p>
            <div class="four">
              <p><span />签字:{{ obj.towAssetsAdminUsername }}</span></p>
              <p>
                <span
                  v-if="obj.towAssetsAdminApproval">时间:{{ obj.towAssetsAdminApproval.approvalTime |dateFormat("YYYY 年 MM 月 DD 日 HH 时 mm 分") }}</span>
              </p>
            </div>
          </td>
          <td>
            <p>安全监管部门： </p>
            <div class="four">
              <p><span>签字:{{ obj.twoSafetyAdminUsername }}</span></p>
              <p>
                <span
                  v-if="obj.twoSafetyAdminApproval">时间:{{ obj.twoSafetyAdminApproval.approvalTime |dateFormat("YYYY 年 MM 月 DD 日 HH 时 mm 分") }}</span>
              </p>
            </div>
          </td>
        </tr>

        <tr align="left">
          <td rowspan="1" colspan="6">
            <div>
              <p>八、二级单位主管领导： </p>
              <div class="three">
                <p class="right">
                  <span>签字:{{ obj.leaderAdminUsername }}</span>
                </p>
                <p class="right">
                  <span
                    v-if="obj.leaderAdminApproval">时间:{{ obj.leaderAdminApproval.approvalTime |dateFormat("YYYY 年 MM 月 DD 日 HH 时 mm 分") }}</span>
                </p>
              </div>
            </div>
          </td>
        </tr>
        <tr align="left">
          <td colspan="3">
            <p>九、公司部门业务主管部门审查意</p>
          </td>
          <td>
            <p>生产调度运行部门:</p>
            <div class="four">
              <p><span> 签字:{{ obj.productionAdminUsername }}</span></p>
              <p>
                <span v-if="obj.productionAdminApproval">
                  时间:{{ obj.productionAdminApproval.approvalTime |dateFormat("YYYY 年 MM 月 DD 日 HH 时 mm 分") }}</span>
              </p>
            </div>
          </td>
          <td>
            <p style="font-size:14px"> 资产设施管理部门（生产、管道或工程）:</p>
            <div class="four">
              <p><span> 签字:{{ obj.assetsAdminUsername }}</span></p>
              <p>
                <span
                  v-if="obj.assetsAdminApproval">时间:{{ obj.assetsAdminApproval.approvalTime |dateFormat("YYYY 年 MM 月 DD 日 HH 时 mm 分") }}</span>
              </p>
            </div>
          </td>
          <td>
            <p> 安全监管部门： </p>
            <div class="four">
              <p><span> 签字:{{ obj.safetyAdminUsername }}</span></p>
              <p>
                <span v-if="obj.safetyAdminApproval">
                  时间:{{ obj.safetyAdminApproval.approvalTime |dateFormat("YYYY 年 MM 月 DD 日 HH 时 mm 分") }}</span>
              </p>
            </div>
          </td>
        </tr>
        <tr align="left">
          <td rowspan="6" colspan="6">
            <div>
              <p>十、资产设施管理部门负责人：</p>
              <div class="three">
                <p class="right">
                  <span>签字:{{ obj.facilityAdminUsername }}</span>
                </p>
                <p class="right">
                  <span
                    v-if="obj.facilityAdminApproval">时间:{{ obj.facilityAdminApproval.approvalTime |dateFormat("YYYY 年 MM 月 DD 日 HH 时 mm 分") }}</span>
                </p>
              </div>
            </div>
          </td>
        </tr>
      </table>
      <div class="botDesc">
        <p>保存单位：动火单位</p>
        <p>保存期限：一年</p>
      </div>
    </div>

    <span slot="footer" class="dialog-footer">
      <el-row type="flex" justify="end">
        <el-button @click="OnCanCel">取 消</el-button>
        <el-button v-print="{
                id: 'printMe',
                popTitle: ''
              }" type="primary" icon="el-icon-printer">打印</el-button>
      </el-row>
    </span>





  </div>
</template>

<script>
  import {
    postHandle
  } from '@/api'
  import WiseFile from '@/components/Crud/components/wiseFile'
  export default {
    components: {
      WiseFile
    },
    props: ['object', 'id'],
    data() {
      return {
        show: '/api/v1/welder-sbtx-second/hot-program-comb/show/',
        obj: {},
        dialogVisible: false,
        imgArr: []

      }
    },
    created() {
      // this.obj = this.object

      this.getObjectById()
    },
    methods: {
      OnCanCel() {
        this.$emit('hideDjog', false)
      },
      getObjectById() {
        postHandle(this.show + this.id, {}).then((response) => {
          this.obj = response.result
          this.imgArr = []
          if (response.result.sketchMap) {
            let a = response.result.sketchMap.match(/(\;)/)
            if (a != null) {
              this.imgArr = response.result.sketchMap.split(';')
            } else {
              this.imgArr.push(response.result.sketchMap)
            }
          }
        })
      }
    }
  }
</script>

<style scoped>
  table {
    border-collapse: collapse;
  }

  table,
  table tr,
  table tr th,
  table tr td {
    line-height: 41px;
    border: 1px solid #000000;
    vertical-align: top;
  }

  .title {
    text-align: center;
    font-size: 20px;
  }

  /deep/ .el-image {
    margin-top: 10px;
    margin-left: 5px;
  }

  .bianhao {
    text-align: right;
  }

  .hh {
    white-space: normal;
    word-break: break-all;
    word-wrap: break-word;
  }

  .three {
    margin-top: 80px;
  }

  .four {
    margin-top: 60px;
  }

  .right {
    text-align: right;
    width: 100%;
  }

  .botDesc {
    line-height: 30px;
  }

  .right span {
    display: inline-block;
    width: 270px;
    text-align: left;
  }

  .left {
    text-align: left;
  }

  p {
    font-size: 13px;
  }
</style>